<template>
    <div class="m-container">
        <h3 class="m-center">个人中心</h3>
        <div class="m-margin-center m-center" style="margin-bottom: 30px">
            <van-image
                    class="m-img-center"
                    round
                    width="10rem"
                    height="10rem"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
        </div>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item  text="姓名" />
            <van-grid-item  :text="user.username" />
        </van-grid>

        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item  text="个性签名" />
            <van-grid-item  :text="user.personalizedSignature" />
        </van-grid>
        <van-grid direction="horizontal" :column-num="2">
            <van-grid-item  text="角色" />
            <van-grid-item  :text="user.role===1?'普通用户':'管理员'" />
        </van-grid>
        <van-grid direction="horizontal" :column-num="1" style="margin-top: 30px">
            <van-grid-item>
                <van-button type="primary" @click="toOrders" block>我的订单</van-button>
            </van-grid-item>
        </van-grid>
        <van-grid direction="horizontal" :column-num="1">
            <van-grid-item>
                <van-button type="warning" @click="logout" block>退出登录</van-button>
            </van-grid-item>
        </van-grid>
        <Tabbar/>
    </div>
</template>

<script>
    import Tabbar from "../../components/TabBar";
    import storage from "../../utils/sessionUtils";
    import {toLogout} from "../../utils/apis";
    export default {
        name: "Mine",
        components: {Tabbar},
        data(){
            return{
                user:{}
            }
        },
        created() {
            this.getUser()
        },
        methods:{
            getUser(){
                this.user = storage.get('userInfo')
                if (this.user === null) this.$router.push("login")
            },
            toOrders(){
                this.$router.push("order")
            },
            logout(){
                toLogout().then(res =>{
                    if (res.status === 10000){
                        storage.remove('userInfo')
                        this.$router.push("login")
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .m-center{
        text-align: center;
    }
    .m-margin-center{
        margin: 0 auto;
    }
    .m-container{
        padding: 12px;
    }
    .m-left{
        margin-top: 30px;
        margin-left: 50px;
    }

</style>
